<!-- #layout name=default -->
<div id="main">
    <div class="content-fluid">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="page-header">
                    <h1 class="title">Template</h1>
                    <div class="col-md-4 pull-right" data-bind="visible: type() == 'list'">
                        <div class="row input-group">
                            <input type="text" data-bind="value: searchKey, hasFocus: keywordFocus, event: { keyup: handleEnter }" class="form-control" placeholder="Enter your keyword" style="height: 32px;">
                            <div class="input-group-btn">
                                <button class="btn btn-default" data-bind="click: searchStart"><i class="fa fa-search"></i>Search</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix">
                    <ul class="nav nav-tabs" data-bind="visible: !searched()">
                        <li data-bind="click: changeType.bind(this, 'list')">
                            <a href="#public" data-toggle="tab">Public</a>
                        </li>
                        <li data-bind="click: changeType.bind(this, 'personal')">
                            <a href="#personal" data-toggle="tab">Personal</a>
                        </li>
                    </ul>
                    <div class="alert alert-block alert-info" data-bind="visible: searched(), css: { 'alert-info': packages().length, 'alert-warning': !packages().length }">
                        <!-- ko if: packages().length -->
                        <h4>Search result</h4>
                        <p data-bind="text: Kooboo.text.site.template.weHaveFound + searchCount() + Kooboo.text.site.template.templateUnit"></p>
                        <!-- /ko -->
                        <!-- ko if: !packages().length -->
                        <h4 data-bind="text: Kooboo.text.common.sorry"></h4>
                        <p>No template found</p>
                        <!-- /ko -->
                        <br>
                        <p>
                            <a class="btn" href="javascript:;" data-bind="click: changeKeyword, css: { blue: packages().length, orange: !packages().length }">Try other keyword</a>
                            <a class="btn btn-default" href="javascript:;" data-bind="click: clearSearchResult">Return</a>
                        </p>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade" id="public">
                            <div class="row template-list" data-bind="foreach: { data: packages, afterRender: afterRender }">
                                <div class="col-sm-6 col-md-3">
                                    <a href="javascript:;" data-bind="click: $parent.chooseTemplate.bind(this)" class="thumbnail">
                                        <span class="wrapper">
                                            <img alt="thumbnail" class="lazy" data-bind="attr: { 'data-original': $data.thumbNail,alt: $data.name }">
                                            <span data-bind="text: $data.description" class="desc"></span>
                                        </span>
                                        <div class="caption">
                                            <strong data-bind="text: $data.name"></strong>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="personal">
                            <div class="row template-list" data-bind="foreach: { data: personalPackages, afterRender: afterRender }">
                                <div class="col-sm-6 col-md-3">
                                    <a href="javascript:;" data-bind="click: $parent.chooseTemplate.bind(this)" class="thumbnail">
                                        <span class="wrapper">
                                        <img alt="thumbnail" class="lazy" data-bind="attr: { 'data-original': $data.thumbNail,alt: $data.name }">
                                        <span data-bind="text: $data.description" class="desc"></span>
                                        </span>
                                        <div class="caption">
                                            <strong data-bind="text: $data.name"></strong>
                                            <button data-bind="click: $parent.removePackage, tooltip: Kooboo.text.common.remove, clickBubble: false" class="btn btn-xs red pull-right clickable"><i class="fa fa-minus"></i></button>
                                            <button data-bind="click: $parent.editPackage, tooltip: Kooboo.text.common.edit, clickBubble: false" class="btn btn-xs blue margin-right-10 pull-right clickable"><i class="fa fa-pencil"></i></button>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div data-bind="component: { name: 'kb-pager', params: pager }"></div>
                    <div data-bind="visible: ((type() == 'list' && !packages().length )|| (type() == 'personal' && !personalPackages().length)) && !searched()">
                        <div class="well well-lg">
                            <h4 data-bind="text: Kooboo.text.common.sorry"></h4>
                            <p>
                                <span>No template available now</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div data-bind="modal: editTemplateModal" class="modal fade" id="editTemplateModal" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button data-bind="click: resetEdit" class="close"><i class="fa fa-close"></i></button>
                    <h4 class="modal-title">Edit template</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="form-horizontal">
                                <!-- ko if: editing() -->
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Site name</label>
                                    <div class="col-md-10 row">
                                        <div class="col-md-6">
                                            <p data-bind="text: editing().name" class="form-control-static"></p>
                                        </div>
                                        <!-- <div class="col-md-6 checkbox-inline">
                                            <label> <input data-bind="checked: editing().isPrivate" type="checkbox"> <span>Make private</span> </label>
                                        </div> -->
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Tags</label>
                                    <div class="col-md-10">
                                        <select id="select2_element" data-bind="options: editing().tags, selectedOptions: editing().selectedTags" multiple class="form-control invisible"></select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Description</label>
                                    <div class="col-md-10">
                                        <textarea data-bind="value: editing().description" class="form-control autosize"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Link</label>
                                    <div class="col-md-10">
                                        <input data-bind="value: editing().link" class="form-control" placeholder="link description">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Thumbnails</label>
                                    <div class="col-md-10">
                                        <div class="fileinput">
                                            <span class="btn btn-default btn-file"><span>Select images</span>
                                            <input id="edit_file" type="file" multiple/>
                                            </span>&nbsp;
                                            <span data-bind="visible: !editing().imgList().length"><span>Support types: bmp, png, jpg, jpeg.</span>&nbsp;<span>System will add thumbnails automatically if user don't upload any thumbnail.</span></span>
                                            <span data-bind="visible: editing().imgList().length">Click the image below to select cover image.</span>
                                        </div>
                                        <div class="file-list img-list">
                                            <ul data-bind="visible: editing().imgList().length">
                                                <!-- ko foreach: editing().imgList -->
                                                <li data-bind="click: $parent.chooseAsDefault, css: { active: $data.selected }">
                                                    <div class="fileinput-new thumbnail">
                                                        <img data-bind="attr: { src: $data.value }" style="width: 100px; height: 100px;" src="">
                                                    </div>
                                                    <a data-bind="tooltip:Kooboo.text.common.remove,click: $parent.removeFile.bind(this, $data.type)" href="javascript:;"><i class="fa fa-remove"></i></a>
                                                </li>
                                                <!-- /ko -->
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- /ko -->
                                <div class="form-group">
                                    <label for="" class="col-md-2 control-label">Update package</label>
                                    <div class="col-md-10">
                                        <div class="fileinput fileinput-new">
                                            <span class="btn btn-default btn-file">
                                                <!-- ko ifnot: packageExist -->
                                                <!-- ko text: Kooboo.text.common.selectFile --><!-- /ko -->
                                                <!-- /ko -->
                                                <!-- ko if: packageExist -->
                                                <!-- ko text: Kooboo.text.common.change --><!-- /ko -->
                                                <!-- /ko -->
                                                <input type="file" id="update-package" name="package" accept="application/zip, application/x-zip, application/octet-stream, application/x-zip-compressed" />
                                            </span>
                                            <!-- ko if: !packageExist() -->
                                            &nbsp;<span>Select file</span>
                                            <!-- /ko -->
                                            <span data-bind="visible: packageExist, text: packageName" class="fileinput-filename"></span>
                                            <a data-bind="visible: packageExist, click: clearFile" class="close"><i class="fa fa-close"></i></a>
                                            <span class="help-block">Accept type: *.zip</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button data-bind="click: saveEdit" class="btn green">Save</button>
                    <button data-bind="click: resetEdit" class="btn gray">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <kb-template-modal params="isShow: showTemplateModal, data: templateData"></kb-template-modal>
</div>

<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/lib/select2.min.js",
            "/_Admin/Scripts/components/kbTemplateModal.js",
            "/_Admin/Scripts/components/kbPager.js",
            "/_Admin/Scripts/lib/jquery.textarea_autosize.min.js",
            "/_Admin/Scripts/lib/jquery.lazyload.min.js",
        ])
        Kooboo.loadCSS([
            "/_Admin/Styles/select2/select2.css",
            "/_Admin/Scripts/lib/bxSlider/jquery.bxslider.min.css"
        ])
    })()
</script>
<script src="/_Admin/View/Sites/Template.js"></script>